<template>
  <uni-nav-bar
    title="积分详情"
    :border="false"
    left-icon="left"
    fixed
    @clickLeft="goBack"
  />
  <view class="container">
    <view class="header">
      <text class="store-name">{{ orderData.tradeGoodsName }}</text>
      <view class="order-info">
        <text>订单编号</text> <text>{{ orderData.orderTradeId }}</text>
      </view>
      <view class="order-info">
        <text>订单金额</text> <text>¥{{ orderData.tradeMoney }}</text>
      </view>
      <view class="points-info">
        <!-- <view class="voucher"> <text class="voucher-text">累计收入抵用券 0.1896</text> </view> -->
        <text class="points">积分+{{ orderData.gainIntegral }}</text>
      </view>
    </view>

    <view class="details-container">
      <view class="details-header">
        <text>明细展开</text>
        <view class="arrow-up"></view>
      </view>
      <view class="details-list">
        <view class="detail-item" v-for="(item, index) in details" :key="index">
          <text>{{ formatDate(item.time) }}</text>
          <text class="amount">{{ item.money }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { useRequest } from "ahooks-vue";
import { encryptApi } from "@/api";
import { useUserStore } from "@/store/modules/user";
import rsa from "@/utils/rsa";

const userStore = useUserStore();

const orderData = ref({});
const details = ref([]);
const orderTradeId = ref("");

// 格式化日期的方法
const formatDate = (dateStr) => {
  if (!dateStr) return "";
  return dateStr;
};

// 获取订单数据
const { run: getOrderDataRun } = useRequest(
  () =>
    encryptApi({
      a_m: "so_soDetails",
      a_d: rsa.encrypt({ orderTradeId: orderTradeId.value }, true),
    }),
  {
    manual: true,
    onSuccess: (response) => {
      console.log("获取订单数据成功:", response);
      if (response && response.data) {
        orderData.value = response.data;
      }
    },
    onError: (error) => {
      console.error("获取订单数据失败:", error);
      uni.showToast({
        title: "获取订单数据失败",
        icon: "none",
      });
    },
  }
);

// 获取补贴列表
const { run: getSubsidyListRun } = useRequest(
  () =>
    encryptApi({
      a_m: "cyBerIntegral_bna",
      a_d: rsa.encrypt(
        {
          remarks: orderTradeId.value,
          offset: 1,
          limit: 10,
          uid: userStore.userId,
        },
        true
      ),
    }),
  {
    manual: true,
    onSuccess: (response) => {
      console.log("获取补贴列表成功:", response);
      if (response && response.data) {
        details.value = response.data.rows || [];
      }
    },
    onError: (error) => {
      console.error("获取补贴列表失败:", error);
      uni.showToast({
        title: "获取明细数据失败",
        icon: "none",
      });
    },
  }
);

// 复制订单编号
const copyOrderNumber = () => {
  if (!orderData.value.orderTradeId) {
    uni.showToast({
      title: "订单编号不存在",
      icon: "none",
    });
    return;
  }

  uni.setClipboardData({
    data: orderData.value.orderTradeId,
    success: () => {
      uni.showToast({
        title: "复制成功",
        icon: "none",
      });
    },
  });
};

// 生命周期
onLoad((options) => {
  console.log("积分详情页面加载:", options);
  if (options.orderTradeId) {
    orderTradeId.value = options.orderTradeId;
    getOrderDataRun();
    getSubsidyListRun();
  }
});
const goBack = () => {
  uni.navigateBack();
};
</script>

<style scoped lang="scss">
.container {
  padding: 16px;
  background-color: #f7f7f7;
  min-height: 100vh;
  box-sizing: border-box;

  .header {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

    .store-name {
      font-size: 16px;
      font-weight: 600;
      color: #333;
    }

    .order-info {
      margin-top: 20px;
      display: flex;
      justify-content: space-between;
      color: #666;
      font-size: 14px;
    }

    .points-info {
      margin-top: 20px;
      background: #fff;
      padding: 12px 0 0;
      border-top: 1px solid #f0f0f0;
      display: flex;
      align-items: center;
      justify-content: flex-end;

      .voucher {
        display: flex;
        align-items: center;

        &::before {
          content: "券";
          display: inline-flex;
          align-items: center;
          justify-content: center;
          background: #ff6a00;
          color: #fff;
          font-size: 12px;
          border-radius: 6px;
          padding: 2px 6px;
          margin-right: 8px;
        }

        .voucher-text {
          color: #333;
          font-size: 14px;
        }
      }

      .points {
        font-size: 14px;
        font-weight: 600;
      }
    }
  }

  .details-container {
    margin-top: 12px;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    padding: 15px;

    .details-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 0 15px;
      border-bottom: 1px solid #f0f0f0;
      color: #333;
      font-size: 15px;

      .arrow-up {
        width: 0;
        height: 0;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-bottom: 8px solid #999;
      }
    }

    .details-list {
      max-height: 70vh;
      overflow-y: auto;

      .detail-item {
        padding: 17px 0;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #f0f0f0;
        color: #333;
        font-size: 14px;

        &:last-child {
          border-bottom: none;
        }

        .amount {
          font-weight: 600;
        }
      }
    }
  }
}
</style>
